var nav =document.querySelectorAll(".nav2 > li");
var main =document.querySelectorAll(".main-top > .main-top-1");


for(var i = 0;i<nav.length; i++){
    nav[i].index = i;
    nav[i].addEventListener('click',function(){
        for(var j=0 ;j<nav.length; j++){
            nav[j].classList.remove('active');
            main[j].classList.remove('active');
        }
        console.log(this);
        console.log(this.index);
        this.classList.add('active');
        main[this.index].classList.add('active');
    })
}


//获取时间
var box =new Date();
var m = new Date().getMonth();
var da = new Date().getDate();
var d = new Date().getDay();


//console.log((box.getMonth() +1)+ "月" +box.getDate()+ "日" + "星期" +box.getDay());
document.querySelector("#s-1").innerHTML = m+1;
document.querySelector("#s-2").innerHTML = da;
document.querySelector("#s-3").innerHTML = d;




//获取s_2的值
var s_2 = document.querySelector("#s_2");
//获取ul1的值
var ul1 = document.querySelector("#ul1");
//获取text的值
var text = document.querySelector("#text");
//获取ul2的值
var ul2 = document.querySelector("#ul2");




s_2.addEventListener("click",function(){

    //创建节点li
    var li = document.createElement("li");
    //创建节点button
    var button = document.createElement("button");
    //创建节点p
    var p = document.createElement("p");
    //创建节点span
    var span = document.createElement("span");

    //添加节点li
    ul1.appendChild(li);
    //添加节点button
    li.appendChild(button);
    //添加节点p
    li.appendChild(p);
    //添加节点span
    li.appendChild(span);

    //赋值给第一个p标签
    p.innerHTML = text.value;
    //头部的input值为空
    text.value = "";


    //先把p编辑成不可编辑状态
    p.setAttribute('contenteditable',false);


    //给p添加双击事件
    p.addEventListener('dblclick',function(){

        //p设置为可编辑状态
        p.setAttribute('contenteditable',true);
    });

    //p 加失去焦点事件
    p.addEventListener('blur',function(){

        //p设置为不可编辑状态
        p.setAttribute('contenteditable',false);
    });






    //创建节点li
    var li1 = document.createElement("li");
    //创建节点button
    var button1 = document.createElement("button");
    //创建节点p
    var p1 = document.createElement("p");
    //创建节点span
    var span1 = document.createElement("span");

    //添加节点li1
    ul2.appendChild(li1);
    //添加节点button1
    li1.appendChild(button1);
    //添加节点p1
    li1.appendChild(p1);
    //添加节点span1
    li1.appendChild(span1);

    //赋值给第二个p标签
    p1.innerHTML = p.innerHTML;


    //先把p1编辑成不可编辑状态
    p1.setAttribute('contenteditable',false);


    //给p1添加双击事件
    p1.addEventListener('dblclick',function(){

        //p1设置为可编辑状态
        p1.setAttribute('contenteditable',true);
    });

    //p1 加失去焦点事件
    p1.addEventListener('blur',function(){

        //p1设置为不可编辑状态
        p1.setAttribute('contenteditable',false);
    });



    //第一个ul的button的点击事件
    button.addEventListener("click",function(){

        li.style.display = "none";
        li1.style.display = "inline-block";
        button1.innerHTML = "✔"

    });

    //第二个ul的button的点击事件
    button1.addEventListener("click",function(){

        li1.style.display = "none";
        li.style.display = "inline-block";
        button.innerHTML = ""

    });

    //第一个ul的span的点击事件
    span.addEventListener("click",function(){

        li.style.display = "none";

    });

    //第二个ul的span的点击事件
    span1.addEventListener("click",function(){

        li1.style.display = "none";

    });


});




//获取s_3的值
var s_3 = document.querySelector("#s_3");
//获取ul1的值
var ul_1 = document.querySelector("#ul_1");
//获取text的值
var text1 = document.querySelector("#text1");
//获取ul2的值
var ul_2 = document.querySelector("#ul_2");


s_3.addEventListener("click",function(){

    //创建节点li
    var li = document.createElement("li");
    //创建节点button
    var button = document.createElement("button");
    //创建节点p
    var p = document.createElement("p");
    //创建节点span
    var span = document.createElement("span");

    //添加节点li
    ul_1.appendChild(li);
    //添加节点button
    li.appendChild(button);
    //添加节点p
    li.appendChild(p);
    //添加节点span
    li.appendChild(span);

    //赋值给第一个p标签
    p.innerHTML = text1.value;
    //头部的input值为空
    text1.value = "";




    //创建节点li
    var li1 = document.createElement("li");
    //创建节点button
    var button1 = document.createElement("button");
    //创建节点p
    var p1 = document.createElement("p");
    //创建节点span
    var span1 = document.createElement("span");

    //添加节点li1
    ul_2.appendChild(li1);
    //添加节点button1
    li1.appendChild(button1);
    //添加节点p1
    li1.appendChild(p1);
    //添加节点span1
    li1.appendChild(span1);

    //赋值给第二个p标签
    p1.innerHTML = p.innerHTML;


    //第一个ul的button的点击事件
    button.addEventListener("click",function(){

        li.style.display = "none";
        li1.style.display = "inline-block";
        button1.innerHTML = "✔"

    });

    //第二个ul的button的点击事件
    button1.addEventListener("click",function(){

        li1.style.display = "none";
        li.style.display = "inline-block";
        button.innerHTML = ""

    });

    //第一个ul的span的点击事件
    span.addEventListener("click",function(){

        li.style.display = "none";

    });

    //第二个ul的span的点击事件
    span1.addEventListener("click",function(){

        li1.style.display = "none";

    });


});




//获取s_4的值
var s_4 = document.querySelector("#s_4");
//获取ul1的值
var ul_3 = document.querySelector("#ul_3");
//获取text的值
var text2 = document.querySelector("#text2");
//获取ul2的值
var ul_4 = document.querySelector("#ul_4");


s_4.addEventListener("click",function(){

    //创建节点li
    var li = document.createElement("li");
    //创建节点button
    var button = document.createElement("button");
    //创建节点p
    var p = document.createElement("p");
    //创建节点span
    var span = document.createElement("span");

    //添加节点li
    ul_3.appendChild(li);
    //添加节点button
    li.appendChild(button);
    //添加节点p
    li.appendChild(p);
    //添加节点span
    li.appendChild(span);

    //赋值给第一个p标签
    p.innerHTML = text2.value;
    //头部的input值为空
    text2.value = "";


    //创建节点li
    var li1 = document.createElement("li");
    //创建节点button
    var button1 = document.createElement("button");
    //创建节点p
    var p1 = document.createElement("p");
    //创建节点span
    var span1 = document.createElement("span");

    //添加节点li1
    ul_4.appendChild(li1);
    //添加节点button1
    li1.appendChild(button1);
    //添加节点p1
    li1.appendChild(p1);
    //添加节点span1
    li1.appendChild(span1);

    //赋值给第二个p标签
    p1.innerHTML = p.innerHTML;


    //第一个ul的button的点击事件
    button.addEventListener("click",function(){

        li.style.display = "none";
        li1.style.display = "inline-block";
        button1.innerHTML = "✔"

    });

    //第二个ul的button的点击事件
    button1.addEventListener("click",function(){

        li1.style.display = "none";
        li.style.display = "inline-block";
        button.innerHTML = ""

    });

    //第一个ul的span的点击事件
    span.addEventListener("click",function(){

        li.style.display = "none";

    });

    //第二个ul的span的点击事件
    span1.addEventListener("click",function(){

        li1.style.display = "none";

    });

});

